<template>
  <div class="float_service">
    <div class="bouce">
      <img :src="imgList.consult2" alt="" />
      <div class="dialog">
        <div class="key_say">小科正在为您服务！</div>
        <div class="dialog-info">
          <span>售前咨询</span>
          <span>周一至周日8:30-24:00</span>
          <a href="#" @click.prevent="login">
            <img :src="imgList.consult3" alt="" />
          </a>
        </div>
        <div class="dialog-info">
          <span>售前咨询</span>
          <span>周一至周日8:30-24:00</span>
          <a href="#" @click.prevent="login">
            <img :src="imgList.consult3" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: {
        consult2: require("../assets/image/login/ia_700000002.png"),
        consult3: require("../assets/image/login/ia_700000004.jpg"),
      },
    };
  },
  methods: {
    login() {
      if (sessionStorage.getItem("token")) {
        console.log(11);
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="scss">
@keyframes bouce {
  0%,
  50%,
  100% {
    transform: translate(0px, 0px);
  }

  25%,
  75% {
    transform: translate(0px, -7px);
  }
}

.float_service {
  width: 65px;
  height: 230px;
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 9;

  .bouce {
    float: right;
    animation: bouce 2s ease infinite;

    &:hover > .dialog {
      display: block;
    }

    img {
      float: right;
      width: 65px;
    }

    .dialog {
      display: none;
      position: relative;
      top: -49px;
      width: 256px !important;
      height: 312px !important;
      background-color: transparent !important;
      padding-left: 25px !important;
      padding-top: 20px !important;
      background: url(../assets/image/login/ia_700000015.png) no-repeat left top;

      .key_say {
        font-size: 14px;
        color: #253746;
        margin-bottom: 20px;
      }

      .dialog-info {
        margin-bottom: 32px;
        text-align: left;

        span {
          display: block;
          font-size: 14px;
          color: #253746;
        }

        a {
          width: 129px;
          height: 28px;
          display: block;

          img {
            display: block;
            width: 129px;
            height: 28px;
          }
        }
      }
    }
  }
}
</style>